<template>
  <div class="home">
    <div class="item" v-for="value of item" :key="value._id">
      <img :src="value.pic" alt="" class="img" @click="handleDetail(value._id)">
      <div class="name">{{ value.title }}</div>
      <div class="star">
        <div v-for="(star,index) of value.star" :key="index">
          <template>
            <img v-if="star >= 1.5" src="@/assets/images/icon/star.png" alt="" />
            <img v-else src="@/assets/images/icon/none-star.png" alt="" />
          </template>
        </div>
        <div class="point">{{value.rating}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: {
      type: Array,
    },
    m:{
      type:String
    }
  },
  mounted() {},
  methods: {
    handleDetail(id){
      var m = this.m
      this.$router.push(`/tabbar/movieDetail?id=${id}&m=${m}`)
      this.$http.get(`/history?id=${id}&m=${m}`)
    }
  }
};
</script>

<style  scoped>
.item .img {
  width: 220px;
  height: 300px;
  border: 1px solid gray;
  margin-bottom: 10px;
}
.home {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.name {
  font-size: 30px;
  margin-top: 10px;
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #666;
  margin-bottom: 10px;
}
.item {
  margin-top: 20px;
  margin-left: 22px;
}
.van-cell__value {
  height: 200px;
}
.van-search {
  border: 1px solid #333;
}
.star {
  display: flex;
  line-height: 30px;
}
.star img {
  width: 30px;
  height: 30px;
}
</style>